<template>
	<Container>
		<view class="header">
			<view class="article-box" v-for="(item, index) in assignment.optionArticles" :key="index" :class="{  hidden: chooses[index] === 'hidden', error: chooses[index] === 'error' }" @tap="tap(item, index)">
				<image class="item" :src="item.imageUrl" mode="aspectFit"></image>
				<SuccessIcon v-if="chooses[index] === 'success'" />
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="assignment.questionName" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import SuccessIcon from '../successIcon.vue'
export default {
	mixins: [mixins],
	components: { AudioIcon, Question, Container, SuccessIcon },
	watch:{
		questionPress:function(bool){
			if(!bool){
				this.parseTextAudio({
					text: '猜猜这是什么？'
				}).then(res => {
					setTimeout(() => {
						this.dialogueAudio({
							src: res
						})
					}, 500)
				})
			}
		}
	},
	methods: {
		tap: function(item, index) {
			this.touchAudio()
			if (this.isComplete) return
			this.isComplete = true
			if (item.isMatched) {
				this.optionStatus('success', index)
				this.$parent.next({
					isSure: true
				})
				this.assignment.optionArticles.map((item, current) => {
					if (index !== current) {
						this.optionStatus('hidden', current)
					}
				})
			} else {
				this.optionStatus('error', index)
				this.$parent.next()
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 65vh
	width 720rpx
	border-radius 70rpx
	border 12rpx solid #FCC77D
	background white
	box-sizing border-box
	display flex
	align-items center
	justify-content center
	flex-direction column
	margin 5vh 0
	position relative
	.article-box
		transition all 0.4s
		height 28vh
		width 600rpx
		text-align center
		line-height 28vh
		position relative
		.item
			height 80%
			width 80%
</style>
